<script setup>
import { ref, onMounted, nextTick, unref } from 'vue'
import { DraggableModal } from '@/components/core/draggable-modal'
import { updateCardStatus } from '@/api/comprehensive'
import { getByDictType } from '@/api/common'
import { message } from 'ant-design-vue'

const props = defineProps({
  eCardInfo: {
    type: Object,
    required: true
  },
  showSearchPageLink: {
    // 弹框是否展示返回综合查询link
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['updateCardList', 'updateVisible'])
const rules = {
  ecardStatusCode: [{ required: true, message: '请选择电子卡开关', trigger: 'change' }]
}
const options = ref([])
const formState = ref(props.eCardInfo)
async function getOptions() {
  let res = await getByDictType({ dictType: 'ecardswitch' })
  if (res.isSuccess) {
    const list = []
    res.data &&
      res.data.length &&
      res.data.map((v) => {
        list.push({
          label: v.dictName,
          value: v.dictCode
        })
      })
    options.value = list
  }
}
function initData() {
  getOptions()
}

const eCardVisible = ref(false)
onMounted(async () => {
  await nextTick()
  eCardVisible.value = true
  initData()
})

function handleCancel() {
  eCardVisible.value = false
  emit('updateVisible', false)
}
const loading = ref(false)
const formCardRef = ref()
async function saveCard() {
  formCardRef.value
    .validate()
    .then(async () => {
      let res = null
      loading.value = true
      const data = {
        employeeId: props.eCardInfo.member_id,
        grpContNo: props.eCardInfo.grpContNo,
        switchStatus: unref(formState).ecardStatusCode
      }
      try {
        res = await updateCardStatus(data)
      } catch (err) {
        console.log('err', err)
      } finally {
        loading.value = false
      }
      if (res?.isSuccess) {
        // emit('updateCardList')
        message.success('当前修改已完成，预计次日可查询到。')
        handleCancel()
      }
    })
    .catch((error) => {
      console.log('error', error)
    })
}
</script>
<template>
  <DraggableModal
    v-model:open="eCardVisible"
    :width="680"
    :showSearchPageLink="showSearchPageLink"
    :title="$t('home.card.ECardStatusControl')"
    @cancel="handleCancel"
  >
    <template #footer>
      <a-button key="back" @click="handleCancel">{{ $t('global.close') }}</a-button>
      <a-button type="primary" :loading="loading" @click="saveCard">{{
        $t('global.save')
      }}</a-button>
    </template>
    <a-form
      :rules="rules"
      ref="formCardRef"
      layout="vertical"
      :label-col="{ span: 20 }"
      :wrapper-col="{ span: 14 }"
      :model="formState"
    >
      <a-form-item :label="$t('home.card.ECardStatus')" name="ecardStatusCode">
        <a-select
          v-model:value="formState.ecardStatusCode"
          :allowClear="true"
          :options="options"
          :placeholder="$t('global.PlaceholderSelect')"
        >
        </a-select>
      </a-form-item>
      <a-form-item class="form-item-cny" :label="$t('home.card.ECardAccessRestricted')">
        <a-input-number
          id="inputNumber"
          style="width: 100%"
          disabled
          v-model:value="formState.un_pay_ob"
          :keyboard="true"
          :precision="2"
          :min="0"
        />
      </a-form-item>
    </a-form>
    <a-descriptions layout="vertical" :column="2">
      <a-descriptions-item :label="$t('home.card.Operator')">
        {{ eCardInfo.ecardStatusOperator }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('home.card.ModifyDate')">{{
        eCardInfo.ecardStatusModifyDate
      }}</a-descriptions-item>
    </a-descriptions>
    <a-descriptions layout="vertical">
      <a-descriptions-item label=""
        >注:
        [自动]代表根据既定规则判断电子卡是否开通，优先级低于【手动开】、【手动关】状态</a-descriptions-item
      >
    </a-descriptions>
  </DraggableModal>
</template>
<style lang="scss">
.form-item-cny {
  margin: 20px 0;
}
</style>
